<template>
  <div>
    <div class="topSearch">
      <el-form :model="formState" class="demo-form-inline">
        <div class="oneLine">
          <el-form-item class="s1" label="入驻时间">
            <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item class="s1" label="结束时间">
            <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
        </div>
        <div class="oneLine" style="margin-top: 20px">
          <el-form-item class="s1" label="是否空巢">
            <el-input placeholder="是否空巢"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="鸟类名称">
            <el-input placeholder="鸟类名称"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="成鸟数量">
            <el-input placeholder="成鸟数量"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="垫巢材料">
            <el-input placeholder="垫巢材料"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="繁殖阶段">
            <el-input placeholder="繁殖阶段"></el-input>
          </el-form-item>
        </div>
        <div class="oneLine">
          <el-form-item class="s1" label="卵数量">
            <el-input v-model="formState.long" placeholder="卵数量"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="雏鸟数量">
            <el-input v-model="formState.weight" placeholder="雏鸟数量"></el-input>
          </el-form-item>
          <el-form-item class="s2" style="min-width: 500px;" label="繁育时间">
            <el-date-picker v-model="formState.time" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="oneLine" style="margin-top: 20px">
          <el-form-item class="s1" label="生态环境">
            <el-input placeholder="生态环境"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="森林起源">
            <el-input placeholder="森林起源"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="小生境">
            <el-input placeholder="小生境"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木高度">
            <el-input placeholder="乔木高度"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木郁闭度">
            <el-input placeholder="乔木郁闭度"></el-input>
          </el-form-item>
        </div>

        <div class="oneLine">
          <el-form-item class="s1" label="乔木胸径">
            <el-input v-model="formState.long" placeholder="乔木胸径"></el-input>
          </el-form-item>
          <el-form-item class="s1" label="乔木优势品种">
            <el-input v-model="formState.weight" placeholder="乔木优势品种"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="center">
      <div class="left">
        <el-button  type="primary" icon="el-icon-plus" style="color: #fff;">关联监测图像数据</el-button>
        <el-button  type="primary" icon="el-icon-plus" style="color: #fff;">原始数据</el-button>
      </div>
      <div class="right">
        <el-button type="primary" icon="el-icon-plus" >监测数据关联</el-button>
        <el-button type="primary" icon="el-icon-delete" >监测数据取关</el-button>
      </div>
    </div>

    <div class="tab">
      <el-table ref="multipleTable" stripe :data="tableData" tooltip-effect="dark" style="width: 100% ; height: 92%;"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="物种">
        </el-table-column>
        <el-table-column prop="name" label="图像">
          <template slot-scope="scope">
            <!-- <div><img style="width: 80px; height: 80px;" src="../../../assets/bird.png" alt=""></div> -->
          </template>
        </el-table-column>
        <el-table-column prop="time" label="监测时间">
        </el-table-column>
        <el-table-column prop="name" label="重量">
        </el-table-column>
        <el-table-column prop="name" label="体长">
        </el-table-column>
        <el-table-column prop="name" label="温度">
        </el-table-column>
        <el-table-column prop="name" label="湿度">
        </el-table-column>
        <el-table-column prop="name" label="监测鸟箱">
        </el-table-column>
        <el-table-column prop="name" label="数据审核">
        </el-table-column>
        <el-table-column prop="name" label="行为">
        </el-table-column>
      </el-table>
      <Pagination :total="pageParams.total" :currentPage="pageParams.currentPage" :pageSize="pageParams.pageSize"
        @handleCurrentChange="handleCurrentChange"></Pagination>
    </div>

    <div class="flex-end" style="margin-top: 10px;">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" style="margin-left: 40px;" @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from "../../../components/commons/Pagination.vue";
import Emitter from '../../../utils/emit'
export default {
  components: { Pagination },
  props: {
    basePosition: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      formState: {

      },
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      ],
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  methods: {
    save() {
      this.$message.success('保存成功！')
      Emitter.emit('changePage', this.basePosition, 4);
    },
    back() {
      Emitter.emit('changePage', this.basePosition, 4);
    },
    handleCurrentChange(val) {
      this.pageParams.currentPage = val;
    },
    handleSelectionChange(a, b) {

    },
    edit() {

    }
  },

}
</script>

<style lang="scss" scoped>
.topSearch {
  margin-bottom: 20px;
  background: linear-gradient(90deg, rgba(25, 99, 135, 0.25) 0%, rgba(25, 99, 135, 0.35) 100%);

  padding: 20px 25px;

  .oneLine {
    display: flex;
  }

}

.center {
  margin: 30px 0;
  height: 40px;
  background: linear-gradient(90deg, rgba(115, 255, 247, 0.3) 0%, rgba(115, 255, 247, 0) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  text-align: center;
  font-size: 16px;

  div {
    display: flex;
    align-items: center;

    ::v-deep {
      .el-button {
        min-width: 98px;
        height: 32px;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
        border-image: linear-gradient(216deg, rgba(178, 255, 181, 0) 16%, rgba(178, 255, 181, 0.27) 78%) 1;
        .el-icon-plus  {
          &::before {
            color: #ffffff;
            content: '';
            width: 18px;
            display: inline-block;
            height: 18px;
            background: url('../../../assets/monitor/guanlian.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .el-icon-delete {
          &::before {
            color: #ffffff;
            content: '';
            width: 18px;
            display: inline-block;
            height: 18px;
            background: url('../../../assets/monitor/quguan.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      
    }
  }

  .p1 {
    background: linear-gradient(89deg, rgba(178, 255, 181, 0.49) 4%, rgba(178, 255, 181, 0) 99%);
    height: 30px;
    line-height: 30px;
    width: 192px;
    margin-right: 30px;
  }
}

.tab {
  height: calc(100vh - 560px);
  padding: 20px;
  background: linear-gradient(90deg, rgba(25, 99, 135, 0.25) 0%, rgba(25, 99, 135, 0.35) 100%);
}

.flex-end {
 
  display: flex;
  justify-content: flex-end;

  ::v-deep {
    .el-button {
      min-width: 98px;
      height: 32px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid;
      background: linear-gradient(87deg, rgba(178, 255, 181, 0.49) 0%, rgba(178, 255, 181, 0) 98%);
      box-sizing: border-box;
      border: 1px solid;
      border-image: linear-gradient(216deg, rgba(178, 255, 181, 0.2) 16%, #B2FFB5 78%) 1;
    }
  }

}


::v-deep {
  .el-input__prefix {
    right: 0.05rem;
    left: auto;
  }

  .el-date-editor .el-range__icon {
    position: absolute;
    right: 0.1rem;
  }

  .el-range-separator {
    height: auto;
  }

  .el-form-item {
    min-width: 320px;
    margin-bottom: 0;
  }

  .el-form-item__label {
    color: #fff;
    margin-right: 10px;
    width: 120px;
  }

  .s1 {
    .el-input {
      width: 188px;
    }

    .el-input__inner {
      width: 188px;
      height: 32px;
      background: rgba(18, 28, 38, 0.1);
      border: none;
      color: #fff;
    }
  }

  .s2 {
    .el-input__inner {
      height: 32px;
      background: rgba(18, 28, 38, 0.1);
      color: #fff;
      border: none;
    }

    .el-range-separator {
      color: #fff;
    }

    .el-range-input {
      background: none;
      color: #fff;
    }
  }


  .el-table {
    overflow-y: auto;
    background: transparent;
    border: none;
  }

  .el-table::before {
    height: 0;
  }

  .el-table__header-wrapper tr {
    height: 40px;
    background: linear-gradient(90deg, rgba(115, 255, 247, 0.208) 0%, rgba(115, 255, 247, 0.16) 100%) !important;

    .el-checkbox__inner {
      background: transparent;
      border: 1px solid rgba(115, 255, 247, 0.5);
    }
  }

  .el-table .el-table__cell {
    background: none !important;
    height: 40px;
    color: #fff;
    font-weight: normal;
    border: none !important;
    text-align: center;
  }

  .el-table__body {
    .el-table__row {
      height: 100px;
      background: transparent;
      color: #fff;

      .el-checkbox__inner {
        background: transparent;
        border: 1px solid rgba(115, 255, 247, 0.5);
      }
    }

    .el-table__row--striped {
      background: linear-gradient(90deg, rgba(115, 255, 247, 0.078) 0%, rgba(115, 255, 247, 0.06) 100%);

    }
  }
}
</style>